<template>
  <div>
    <cfDialog :dialogObj='dialogObj'>
      <div slot='content' v-loading='loading'>
        <el-form ref='form' :model='form' label-width='80px' label-position="right" size='small'>
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务名称" prop="jobName">
                <el-input v-model="form.jobName" placeholder="请输入任务名称" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="任务分组" prop="jobGroup">
                <el-select v-model="form.jobGroup" placeholder="请选择任务分组" style="width: 100%;">
                  <el-option v-for="dict in sysJobGroup" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="invokeTarget" label-width="100px">
                <span slot="label">
                  调用方法
                  <el-tooltip placement="top">
                    <div slot="content">
                      Bean调用示例：ryTask.ryParams('ry')
                      <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
                      <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                    </div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </span>
                <el-input v-model="form.invokeTarget" placeholder="请输入调用目标字符串" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="cron表达式" prop="cronExpression" label-width="100px">
                <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
                  <template slot="append">
                    <el-button type="primary" @click="handleShowCron">生成表达式<i class="el-icon-time el-icon--right"></i></el-button>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="执行策略" prop="misfirePolicy">
                <el-radio-group v-model="form.misfirePolicy" size="small">
                  <el-radio-button label="1">立即执行</el-radio-button>
                  <el-radio-button label="2">执行一次</el-radio-button>
                  <el-radio-button label="3">放弃执行</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否并发" prop="concurrent">
                <el-radio-group v-model="form.concurrent" size="small">
                  <el-radio-button label="0">允许</el-radio-button>
                  <el-radio-button label="1">禁止</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状 态">
                <el-radio-group v-model="form.status">
                  <el-radio v-for="dict in sysJobStatus" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template slot='footer'>
        <el-button type='primary' v-if='!loading' size='small' @click='handleConfirm'>确定</el-button>
      </template>
    </cfDialog>
    <el-dialog title="Cron表达式生成器" :visible.sync="openCron" width="600px" append-to-body destroy-on-close class="scrollbar">
      <crontab @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
    </el-dialog>
  </div>
  
</template>
<script>
import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus, exportJob } from "@/api/monitor/job";
import crontab from '@/components/Crontab'
export default {
  components: {crontab},
  props: {
    dialogObj: {
      type: Object,
      default: ({
        visible: false,
        type: '',
        id: '',
        title: '',
        width: '520px'
      })
    }
  },
  data() {
    return {
      form: {},
      rules: { /**表单校验规则*/
        jobName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        invokeTarget: [
          { required: true, message: "调用目标字符串不能为空", trigger: "blur" }
        ],
        cronExpression: [
          { required: true, message: "cron执行表达式不能为空", trigger: "blur" }
        ]
      },
      loading: false,
      expression: null,
      openCron: false,
    }
  },
  async mounted() {
    await this.getSysJobStatus();
    await this.getSysJobStatus();
    if(this.dialogObj.id) {
      this.getDetailFn();
    } else {
      this.form = {
        jobId: undefined,
        jobName: undefined,
        jobGroup: undefined,
        invokeTarget: undefined,
        cronExpression: undefined,
        misfirePolicy: 1,
        concurrent: 1,
        status: "0"
      }
    }
  },
  methods: {
    handleConfirm() {  /**确定按钮提交功能*/
      this.submitForm('form', async ()=>{
        this.loading = true;
        let res;
        if(this.dialogObj.id) { /**编辑*/
          res = await updateJob(this.form);
        } else { /**新增*/
          res = await addJob(this.form);
        }
        if(res.code == 200) {
          this.$message.success('操作成功');
          this.dialogObj.visible = false;
          this.$emit('refresh');
        }
        setTimeout(()=> { this.loading = false;}, 500);
      })
    },
    handleShowCron() {  /** cron表达式按钮操作 */
      console.log(this.form);
      this.expression = this.form.cronExpression;
      this.openCron = true;
    },
    crontabFill(value) { /** 确定后回传值 */
      this.form.cronExpression = value;
    },
    async getDetailFn() { /**获取弹窗详情*/
      this.loading = true;
      const res = await getJob(this.dialogObj.id);
      if(res.code == 200) {
        this.form = res.data;
      }
      setTimeout(()=>{
        this.loading = false;
      }, 500)
    }
  }
}
</script>